<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="http://api.map.baidu.com/api?v=2.0&ak=BIMkrVrXh34doklbzbUpxEpZvb7zNOtS"
            type="text/javascript"></script>
</head>
<body>
<div class="page">

    <div class="page__bd">

        <div id="map_container" style="width: 100%;height: 200px"></div>

        <div class="weui-tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item weui-bar__item_on" id="nav_simple_case">
                    简易处理流程
                </div>
                <div class="weui-navbar__item" id="nav_normal_case">
                    一般处理流程
                </div>
            </div>
            <div class="weui-tab__panel">
                <div id="panel_simple_case">
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__hd">
                                <label for="" class="weui-label">事故单号</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input id="input_accident_number" class="weui-input" type="number" pattern="[0-9]*"
                                       placeholder="请输入事故单号"/>
                            </div>
                        </div>
                    </div>


                    <div class="weui-btn-area">
                        <a class="weui-btn weui-btn_primary" href="javascript:" id="btn_submit">发送</a>
                    </div>
                </div>

                <div id="panel_normal_case" style="display: none">
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__hd">
                                <label for="" class="weui-label">肇事方</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input id="input_responsible_party" class="weui-input" type="text"
                                       placeholder="请输入车牌或身份证号"/>
                            </div>
                        </div>
                    </div>
                    <div class="weui-cells__tips">事故中存在机动车时请输入车牌</div>


                    <div class="weui-btn-area">
                        <a class="weui-btn weui-btn_primary" href="javascript:" id="btn_submit_normal">发送</a>
                    </div>
                </div>
            </div>

        </div>


        <div style="display: none;" id="dialog_alert">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
                <div class="weui-dialog__bd">弹窗内容，告知当前页面信息等</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                </div>
            </div>
        </div>

        <div id="loadingToast" style="display:none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content">数据加载中</p>
            </div>
        </div>
    </div>

    <div class="weui-footer  weui-footer_fixed-bottom">
        <p class="weui-footer__links">
            <a href="/wx/history"
               class="weui-footer__link"> 历史记录</a>

            <a href="/wx/register"
               class="weui-footer__link"> <?php echo $session["department"] . ' ' . $session["name"] ?></a>
        </p>
    </div>

</div>
</body>
<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var current_lng = 0.0;
    var current_lat = 0.0;
    var convertor = new BMap.Convertor();
    var map = new BMap.Map("map_container");          // 创建地图实例
    var marker = undefined;
    var point = new BMap.Point(120.314083, 30.420003);  // 创建点坐标
    map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别

    var translateCallback = function (data) {
        if (data.status === 0) {

            map.setCenter(data.points[0]);

            current_lng = data.points[0].lng;
            current_lat = data.points[0].lat;

            if (marker == undefined) {
                marker = new BMap.Marker(data.points[0]);
                map.addOverlay(marker);

                var label = new BMap.Label("", {offset: new BMap.Size(20, -10)});
                marker.setLabel(label); //添加百度label
            }
            else {
                marker.setPosition(data.points[0]);
            }


            var geoc = new BMap.Geocoder();

            geoc.getLocation(data.points[0], function (rs) {
                var addComp = rs.addressComponents;
                var label = marker.getLabel();
                label.setContent(addComp.district + addComp.street + addComp.streetNumber);
            });
        }
    };


    var currUrl = window.location.href.replace(window.location.hash, '');
    $.getJSON('/wx/signature?url=' + encodeURIComponent(currUrl)).done(function (data) {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'getNetworkType',
                'getLocation',
            ]
        });
    }).error(function (a) {

    });


    var location_func = function () {
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var ggPoint = new BMap.Point(longitude, latitude);  //创建点坐标
                var pointArr = [];
                pointArr.push(ggPoint);
                convertor.translate(pointArr, 1, 5, translateCallback);
            }
        });
    };

    $("#nav_simple_case").click(function () {
        $("#nav_normal_case").removeClass("weui-bar__item_on");
        $("#nav_simple_case").addClass("weui-bar__item_on");
        $("#panel_normal_case").css("display", "none");
        $("#panel_simple_case").css("display", "block");
    });

    $("#nav_normal_case").click(function () {
        $("#nav_simple_case").removeClass("weui-bar__item_on");
        $("#nav_normal_case").addClass("weui-bar__item_on");
        $("#panel_simple_case").css("display", "none");
        $("#panel_normal_case").css("display", "block");
    });

    wx.ready(function () {
        location_func();

        setInterval(function () {
            location_func();
        }, 15000);

        $("#btn_submit").click(function () {
            var accident_number = $("#input_accident_number").val();
            if (accident_number.length != 7 && accident_number.length != 10) {

                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请填写正确的事故单号");
                $("#dialog_alert").fadeIn(200);

            }
            else if (current_lng == 0 || current_lat == 0) {
                location_func();
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("还未获取到位置信息，请稍后重试");
                $("#dialog_alert").fadeIn(200);
            }
            else {

                var $loadingToast = $('#loadingToast');
                if ($loadingToast.css('display') != 'none') return;
                $loadingToast.fadeIn(100);

                $.post("/wx/sgcl",
                    {
                        lng: current_lng,
                        lat: current_lat,
                        related_info: accident_number,
                        openid: '<?php echo $session["openid"] ?>',
                        department: '<?php echo $session["department"] ?>',
                        type:0
                    },
                    function (r) {
                        $loadingToast.fadeOut(100);

                        if (r["code"] == 200) {
                            $("#input_accident_number").val("");

                            $("#dialog_alert .weui-dialog__title").text("提示");
                            $("#dialog_alert .weui-dialog__bd").text("单号 " + accident_number + " 已提交");
                            $("#dialog_alert").fadeIn(200);
                        }
                        else {
                            $("#dialog_alert .weui-dialog__title").text("错误");
                            $("#dialog_alert .weui-dialog__bd").text(r["message"]);
                            $("#dialog_alert").fadeIn(200);
                        }
                    }
                ).error(function () {
                    $loadingToast.fadeOut(100);
                    $("#dialog_alert .weui-dialog__title").text("错误");
                    $("#dialog_alert .weui-dialog__bd").text("请求失败，请确认网络连接是否正常");
                    $("#dialog_alert").fadeIn(200);
                });


                //alert(accident_number + "," + current_lng + "," + current_lat);
            }

        });

        $("#btn_submit_normal").click(function () {
            var responsible_party = $("#input_responsible_party").val().trim().toUpperCase();
            var reg =/^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
            if(!reg.test(responsible_party.trim()))
            {
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请不要输入特殊字符");
                $("#dialog_alert").fadeIn(200);
            }
            else if (responsible_party.trim().length < 3) {

                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请填写正确的事故相关信息");
                $("#dialog_alert").fadeIn(200);

            }
            else if (current_lng == 0 || current_lat == 0) {
                location_func();
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("还未获取到位置信息，请稍后重试");
                $("#dialog_alert").fadeIn(200);
            }
            else {

                var $loadingToast = $('#loadingToast');
                if ($loadingToast.css('display') != 'none') return;
                $loadingToast.fadeIn(100);

                $.post("/wx/sgcl",
                    {
                        lng: current_lng,
                        lat: current_lat,
                        related_info: responsible_party,
                        openid: '<?php echo $session["openid"] ?>',
                        department: '<?php echo $session["department"] ?>',
                        type:1
                    },
                    function (r) {
                        $loadingToast.fadeOut(100);

                        if (r["code"] == 200) {
                            $("#input_responsible_party").val("");

                            $("#dialog_alert .weui-dialog__title").text("提示");
                            $("#dialog_alert .weui-dialog__bd").text(responsible_party + " 肇事事故已提交");
                            $("#dialog_alert").fadeIn(200);
                        }
                        else {
                            $("#dialog_alert .weui-dialog__title").text("错误");
                            $("#dialog_alert .weui-dialog__bd").text(r["message"]);
                            $("#dialog_alert").fadeIn(200);
                        }
                    }
                ).error(function () {
                    $loadingToast.fadeOut(100);
                    $("#dialog_alert .weui-dialog__title").text("错误");
                    $("#dialog_alert .weui-dialog__bd").text("请求失败，请确认网络连接是否正常");
                    $("#dialog_alert").fadeIn(200);
                });


                //alert(accident_number + "," + current_lng + "," + current_lat);
            }

        });

        $('#dialog_alert .weui-dialog__btn').click(function () {
            $("#dialog_alert").fadeOut(200);
        });


    });
</script>
</html>